<!--
 * @Description:封装自己的clsaa类
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-16 06:37:49
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>封装自己的clsaa类</title>
	<style>
		div {
			width: 100px;
			height: 100px;
			background-color: pink;
			margin-top: 10px;
		}
	</style>
	<script>
		window.onload = function () {
			function getClass(classname) {
				if (document.getElementsByClassName) {
					return document.getElementsByClassName(classname)
				}
				// 不支持的写法 
				var arr = [] //用户返回数组
				var dom = document.getElementsByTagName("*");
				for (let index = 0; index < dom.length; index++) { //遍历所有盒子
					const element = dom[index];
					var txtarr = element.className.split(" ") //分割类名 并且 转换为数组
					for (let j = 0; j < txtarr.length; j++) {
						if (txtarr[j] == classname) {
							arr.push(dom[i])
						}
					}
				}
				return arr
			}
			// console.log(getClass("demo"))
			// console.log(getClass("demo").length)
			//封装自己的$
			function $(str) {
				var s = str.charAt(0); //一个$变量存放的是符号
				var ss = str.substr(1) //取到最后
				switch (s) {
					case "#":
						return document.getElementById(ss);
						break;
					case ".":
						return getClass(ss);
						break;
					default:
						return document.getElementsByTagName(str);
						// break;
				}
			}
				console.log($(".demo"))
				console.log($(".demo").length)
				console.log($("div").length)
        console.log($("#btu"))
		}
	</script>
</head>

<body>
	<div></div>
	<div class="demo"></div>
	<div id="btu"></div>
	<div></div>
	<div class="demo"></div>
	<div></div>
	<div></div>
	<div class="demo"></div>
	<div></div>
	<div></div>
</body>

</html>